<template>
  <div :style="{ height }">

    <v-chart ref="chartRef" :class="className" :option="option" style="width: 100%;" v-on="events"
      v-if="isShowChart"></v-chart>
    <ga-empty v-show="!isShowChart" :style="{ height, ...emptyStyle }" :img-src="noDataImg" />
  </div>
</template>

<script setup>
import { watch, onMounted, ref, computed } from 'vue';
import * as echarts from 'echarts';
import myMacarons from './macarons'; // 定制主题颜色
// import { Empty } from '@garco-design/web-vue';
echarts.registerTheme('myMacarons', myMacarons);
const props = defineProps({
  option: Object,
  height: {
    type: [Number, String],
    default: '100%'
  },
  events: {
    type: Object,
    default: () => ({})
  },
  noDataImg: {
    type: Object,
    default: () => null
  },
  className: String,
})
// console.log(props.height, 'height in charts');
const emits = defineEmits(['on-chart-ready'])
const chartRef = ref()
const emptyStyle = {
  margin: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column',
};

const isShowChart = computed(() => {
  return props.option.series?.length > 0 && props.option.series[0]?.data?.length > 0
})
defineExpose({
  echartInstance: chartRef,
  getChartRef: () => chartRef.value
})

</script>

<style scoped lang="scss"></style>
